<template>
  <!--  排行榜  -->
  <div class="wrapper">
    <h2 class="title">排行榜TOP 10</h2>
    <div class="box">
      <div class="hd">
        <span :ref="item.id"
              v-for="(item,index) of ll"
              :key="item.id"
              :class="{'cur': now === item.text}"
              @click="DivClick(index)">{{item.text}}
        </span>
        <!-- <span :class="{'cur': now === '好物业榜'}" @click="now = '好物业榜'">好物业榜</span>-->
        <!-- <span :class="{'cur': now === '壕无人性榜'}" @click="now = '壕无人性榜'">壕无人性榜</span>-->
      </div>
      <div class="bd">
        <div v-for="(item,index) of ll" v-show="now === item.text">
          <ul>
            <li class="item" v-for="item of item.ListList" :key="item.id">
              <div class="item-left">
                <div class="left-positioning">
                  <span class="left-positioning-top"></span>
                  <span class="left-positioning-butotn"></span>
                  <span class="left-positioning-number">{{item.number}}</span>
                </div>
                <img :src="item.imgUrl">
              </div>
              <div class="item-right">
                <h2>
                  {{item.title}}&nbsp;
                  <span v-for="Angle of item.Anglelist" :class="Angle === '严选' ? 'Strict' : 'sale'">{{Angle}}</span>
                </h2>
                <p class="subtitle">{{item.subtitle}}</p>
                <p class="spot">
                  <span v-for="itemx of item.BrightSpot">{{itemx.x}}</span>
                </p>
                <p class="price">
                  <span>{{item.PriceArea.price}}</span>
                  <span class="priceFont">{{item.PriceArea.unit}}</span>
                  <span class="model">{{item.PriceArea.area}}</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
<!--        <div v-show="now === '好物业榜'">
          <ul>
            <li class="item" v-for="item of ListList" :key="item.id">
              <div class="item-left">
                <div class="left-positioning">
                  <span class="left-positioning-top"></span>
                  <span class="left-positioning-butotn"></span>
                  <span class="left-positioning-number">{{item.number}}</span>
                </div>
                <img :src="item.imgUrl">
              </div>
              <div class="item-right">
                <h2>
                  {{item.title}}&nbsp;
                  <span v-for="Angle of item.Anglelist" :class="Angle === '严选' ? 'Strict' : 'sale'">{{Angle}}</span>
                </h2>
                <p class="subtitle">{{item.subtitle}}</p>
                <p class="spot">
                  <span v-for="itemx of item.BrightSpot">{{itemx.x}}</span>
                </p>
                <p class="price">
                  <span>{{item.PriceArea.price}}</span>
                  <span class="priceFont">{{item.PriceArea.unit}}</span>
                  <span class="model">{{item.PriceArea.area}}</span>
                </p>
              </div>
            </li>
          </ul>

        </div>
        <div v-show="now === '壕无人性榜'">
          <ul>
            <li class="item" v-for="item of ListList" :key="item.id">
              <div class="item-left">
                <div class="left-positioning">
                  <span class="left-positioning-top"></span>
                  <span class="left-positioning-butotn"></span>
                  <span class="left-positioning-number">{{item.number}}</span>
                </div>
                <img :src="item.imgUrl">
              </div>
              <div class="item-right">
                <h2>
                  {{item.title}}&nbsp;
                  <span v-for="Angle of item.Anglelist" :class="Angle === '严选' ? 'Strict' : 'sale'">{{Angle}}</span>
                </h2>
                <p class="subtitle">{{item.subtitle}}</p>
                <p class="spot">
                  <span v-for="itemx of item.BrightSpot">{{itemx.x}}</span>
                </p>
                <p class="price">
                  <span>{{item.PriceArea.price}}</span>
                  <span class="priceFont">{{item.PriceArea.unit}}</span>
                  <span class="model">{{item.PriceArea.area}}</span>
                </p>
              </div>
            </li>
          </ul>

        </div>-->
      </div>
    </div>
    <router-link tag="div" to="/leaderboard/" class="List-more">查看更多严选</router-link>
  </div>
</template>

<script>
  export default {
    name: 'PaiHangBang',
    data () {
      return {
        now: '折扣榜',
        ll: [{
          id: '01',
          text: '折扣榜',
          ListList: [{
            id: '0001',
            number: '1',
            imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20190517/9a45656e4aa84e518e2613344623e65b.jpg?x-oss-process=image/resize,w_250',
            title: '富力湾',
            Anglelist: ['严选', '在售'],
            subtitle: '惠东县',
            BrightSpot: [{x: '车位充足'}, {x: '海景'}, {x: '小户型'}, {x: '高绿化'}],
            PriceArea: {
              price: '13700',
              unit: '元/平',
            },
            score: '10'
          }, {
            id: '0002',
            number: '2',
            imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20200204/292287accaf34795b43569b3d9298bb7.jpg?x-oss-process=image/resize,w_250',
            title: '聚泰启程',
            subtitle: '大亚湾',
            Anglelist: ['严选', '在售'],
            BrightSpot: [{x: '车位充足'}, {x: '海景'}, {x: '小户型'}],
            PriceArea: {
              price: '13700',
              unit: '元/平',
            },
            score: '9.8'
          }, {
            id: '0003',
            number: '3',
            imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/63420b7fec5c4aee958d6a23a5d30d50.jpg?x-oss-process=image/resize,w_250',
            title: '海伦堡中侨公馆',
            subtitle: '大亚湾',
            Anglelist: ['在售'],
            BrightSpot: [{x: '车位充足'}, {x: '海景'}, {x: '小户型'}, {x: '高绿化'}],
            PriceArea: {
              price: '13700',
              unit: '元/平',
            },
            score: '8.6'
          }]
        }, {
          id: '02',
          text: '好物业榜',
          ListList: [{
            id: '0001',
            number: '1',
            imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20190517/9a45656e4aa84e518e2613344623e65b.jpg?x-oss-process=image/resize,w_250',
            title: '隆生西江花园',
            Anglelist: ['在售'],
            subtitle: '惠城区',
            BrightSpot: [],
            PriceArea: {
              price: '13950',
              unit: '元/平',
            },
            score: '10'
          }, {
            id: '0002',
            number: '2',
            imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20200204/292287accaf34795b43569b3d9298bb7.jpg?x-oss-process=image/resize,w_250',
            title: '富力惠林温泉',
            subtitle: '大亚湾',
            Anglelist: ['在售'],
            BrightSpot: [{x: '超大社区'}, {x: '低容积率'}, {x: '高绿化率'}],
            PriceArea: {
              price: '24000',
              unit: '元/平',
            },
            score: '9.8'
          },]
        }, {
          id: '03',
          text: '壕无人性榜',
          ListList: [{
            id: '0001',
            number: '1',
            imgUrl: 'http://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/ddced3740f314ecf83887b13f509f5f6.jpg?x-oss-process=image/resize,w_250',
            title: '隆生西江花园',
            Anglelist: ['在售'],
            subtitle: '惠城区',
            BrightSpot: [],
            PriceArea: {
              price: '13950',
              unit: '元/平',
            },
            score: '10'
          }, {
            id: '0002',
            number: '2',
            imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/ba7971137273422c8009eaac0054362b.jpg?x-oss-process=image/resize,w_250',
            title: '富力惠林温泉',
            subtitle: '大亚湾',
            Anglelist: ['在售'],
            BrightSpot: [{x: '超大社区'}, {x: '低容积率'}, {x: '高绿化率'}],
            PriceArea: {
              price: '24000',
              unit: '元/平',
            },
            score: '9.8'
          },{
            id: '0003',
            number: '2',
            imgUrl: 'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/d101514731f9425d89648725b693bf44.jpg?x-oss-process=image/resize,w_250',
            title: '富力惠林温泉',
            subtitle: '龙门县',
            Anglelist: ['在售'],
            BrightSpot: [{x: '车位充足'}, {x: '超大社区'}, {x: '低容积率'},{x: '高绿化率'},{x: '品牌房企'},{x: '小户型'}],
            PriceArea: {
              price: '10800',
              unit: '元/平',
            },
            score: '9.8'
          },]
        }],

      }
    },
    // 方法
    methods: {
      // 排榜列表点击tab 切换,res = 当前索引
      DivClick (res) {
        // 点击元素 获得当前元素索引号
        console.log(res)
        // 把数组对应索引数据赋值给 now 变量
        this.now = this.ll[res].text
        // bd显示也要根据 数组对应索引数据赋值
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    wrapper()

  .title
    title()

  .hd
    height: 40px
    display flex
    justify-content space-around
    margin 0.4rem 0

  .hd span
    width: 110px
    height: 40px
    border-radius .1rem
    background white
    text-align: center
    line-height: 40px
    cursor: pointer
    position relative


  .hd span.cur
    background: #a3c512
    color: #fff

  .hd span.cur::after
    content ""
    position absolute
    top .78rem
    left 38%
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    border-color: #a3c512 transparent transparent


  .bd
    width: 100%

  .item
    width 100%
    box-sizing border-box
    border-bottom: .026667rem solid #f8f7f7
    display: flex
    align-items center
    padding: .2rem
    margin-bottom: .3rem
    background: #fff
    box-shadow: 0 0.08rem 0.16rem 0 rgba(0, 0, 0, .04)
    border-radius: .1rem

  .item-left
    width: 2rem
    height: 1.8rem
    position: relative

  /*overflow hidden*/


  .left-positioning
    position absolute
    left 20%
    top -.2rem
    display flex
    flex-direction column
    align-items center


  .left-positioning-top
    width .5rem
    height .3rem
    background #00b3ea

  .left-positioning-butotn
    float: left;
    width: 0;
    height: 0;
    border-width: 13px;
    border-style: solid;
    border-color: #00b3ea transparent transparent transparent;

  .left-positioning-number
    color white
    font-size .3rem
    position absolute
    top .05rem
    right 0
    bottom 0
    left .18rem


  .item-left img
    border-radius .1rem
    width: 100%
    height: 100%

  .item-right
    flex: 1
    text-align: left
    padding-left: .346667rem
    position: relative

  .item-right
    color #ccc
    font-size 0.012rem

  .item-right h2
    font-size .3rem
    font-weight 500
    color black
    margin-bottom .1rem
    line-height .4rem
    overflowEllipsis()

  .item-right .Strict
    box-sizing border-box
    background #504f5e
    color #f1ddb5
    padding 0.04rem 0.08rem
    border-radius .05rem
    font-size .2rem
    margin 0 .05rem

  .item-right .sale
    box-sizing border-box
    background white
    color #a3c512
    padding 0.04rem 0.08rem
    border 0.02rem solid #a3c512
    border-radius .05rem
    font-size .2rem
    margin 0 .05rem

  .subtitle
    padding-top .12rem

  .item-right .spot
    margin-top .3rem

  .item-right .price
    margin-top .25rem
    font-size .3rem


  .spot span
    background #f3f5f8
    color #9ba6aa
    margin-right .1rem
    padding .05rem .1rem
    border-radius .1rem


  .price span
    color #ff9100
    font-size .3rem
    font-weight 800

  .price .model
    color #798089
    font-size .2rem

  .price .priceFont
    font-size .2rem


  .List-right
    position absolute
    top 0
    right 0
    display flex
    flex-direction column
    align-items center

  .List-right span
    color red
    font-size .35rem

  .List-right p
    color #ccc
    margin-top .1rem

  .List-more
    width: 100%
    height: 1.066667rem
    line-height: 1.066667rem
    border-radius: .266667rem
    background: #f0f2f5
    text-align: center
    font-size: .346667rem
    font-family: PingFang-SC-Medium
    font-weight: 500
    color: #6a81a2
    margin-top: .2rem
    margin-bottom: .3rem

</style>
